<template>
  <div class="app-container" :loading="submitLoading">
    <div class="filter-container">
      <div style="align-items: center; display: flex;justify-content: flex-start;">
        <div class='header_title'>
          <el-input style="width:202px" v-model="req_xin_xi.keyword" placeholder="搜索关键字"></el-input>
          <div class="block" style="width:205px">
            <el-date-picker v-model="req_xin_xi.search_time" type="datetimerange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" align="center"
              value-format="" clearable>
            </el-date-picker>
          </div>
          <el-select style="width:150px" v-model="fuze_name" multiple filterable remote reserve-keyword
            placeholder="搜索负责人" :remote-method="remoteMethod" :loading="loading">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="searchList()">
          搜索
        </el-button>
      </div>
    </div>
    <!-- 列表-->
    <el-table :data="list" v-loading="listLoading" border style="width: 100%">
      <el-table-column width='180' label="姓名" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="2018年业务量折后金额" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.one_zhe_price }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="2018年已回款折后金额" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.one_hui_zhe_price }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="2018年回款率" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.one_lve }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="2019年业务量折后金额" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.two_zhe_price }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="2019年已回款折后金额" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.two_hui_zhe_price }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="2019年回款率" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.two_lve }}</span>
        </template>
      </el-table-column>
      <el-table-column width='250' label="2020年业务量折后金额(2019年转结)" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.there_zhe_price }}</span>
        </template>
      </el-table-column>
      <el-table-column width='250' label="2020年业务量折后金额(2020年新业务)" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.there_zhe_price }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="2020年已回款折后金额" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.there_hui_zhe_price }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="2020年回款率" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.there_lve }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="总业务量折后金额" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.count_zhe }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="总回款折后金额" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.count_hui }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="截止2019年已扣风险金" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.fengxian }}</span>
        </template>
      </el-table-column>
      <el-table-column width='180' label="平均回款率" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.avat }}</span>
        </template>
      </el-table-column>

    </el-table>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="50%" center>
      <div>
        <el-form ref="diary_details" :model="diary_details" label-width="80px" style="text-align: left">
          <el-form-item label="标题:">
            <div>{{ diary_details.title }}</div>
          </el-form-item>
          <el-form-item label="内容:">
            {{ diary_details.content }}
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页-->
    <div class="fenye">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="page_limit"
        layout="total, sizes, prev, pager, next, jumper" :total="page_count">
      </el-pagination>
    </div>
   <!-- <div>
      <Column :width='"700px"' :height='"500px"' :yData='ydata' :xData='xdata'></Column>
    </div>
    <div>
      <Pie :width='"800px"' :height='"400px"' :pie='pie'></Pie>
    </div> -->

  </div>
</template>
<script>
  import {
    notice_del,
    notice_add,
    notice_detail,
    notice_top,
    notice_edit,
  } from "@/api/setup/setup_notice";
  import Column from '@/components/Column/index'
  import Pie from '@/components/Pie/index'
  export default {
    name: "liangxinglv",
    data() {
      return {
        xdata: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        pie: [{
            name: '大强',
            value: 45
          },
          {
            name: '二强',
            value: 200
          },
          {
            name: '三强',
            value: 99
          },
          {
            name: '四强',
            value: 120
          },
          {
            name: '五强',
            value: 150
          },
          {
            name: '六强',
            value: 199
          },
        ],
        ydata: [1544, 5956, 4571, 5891, 2531, 1111, 2222, 3333, 4444, 5712, 6333, 5555],
        fuze_name: '',
        req_xin_xi: {
          search_time: "",
          keyword: ''
        },
        loading: false,
        options: [],
        ruleForm: {
          title: "",
          content: "",
          sort: 0,
          is_top: false,
        },
        rules: {
          title: [{
            required: true,
            message: "请输入标题",
            trigger: "blur",
          }, ],
        },
        listLoading: 0,
        submitLoading: false,
        popup_edit_show: false,
        popup_add_show: false,
        diary_details: {},
        dialogVisible: false,
        // jia_content: "",
        // jia_title: "",
        list: [{
            id: 1,
            position: 1,
            name: '王萌',
            one_zhe_price: 100,
            one_hui_zhe_price: 100,
            one_lve: "50%",
            two_zhe_price: 100,
            two_hui_zhe_price: 100,
            two_lve: "50%",
            there_zhe_price: 100,
            there_hui_zhe_price: 100,
            there_lve: "50%",
            count_zhe: 200,
            count_hui: 200,
            fengxian: 200,
            avat: "50%"
          },
          {
            id: 2,
            position: 2,
            name: '王萌',
            one_zhe_price: 100,
            one_hui_zhe_price: 100,
            one_lve: "50%",
            two_zhe_price: 100,
            two_hui_zhe_price: 100,
            two_lve: "50%",
            there_zhe_price: 100,
            there_hui_zhe_price: 100,
            there_lve: "50%",
            count_zhe: 200,
            count_hui: 200,
            fengxian: 200,
            avat: "50%"
          },
          {
            id: 3,
            position: 3,
            name: '王萌',
            one_zhe_price: 100,
            one_hui_zhe_price: 100,
            one_lve: "50%",
            two_zhe_price: 100,
            two_hui_zhe_price: 100,
            two_lve: "50%",
            there_zhe_price: 100,
            there_hui_zhe_price: 100,
            there_lve: "50%",
            count_zhe: 200,
            count_hui: 200,
            fengxian: 200,
            avat: "50%"
          },
          {
            id: 4,
            position: 4,
            name: '王萌',
            one_zhe_price: 100,
            one_hui_zhe_price: 100,
            one_lve: "50%",
            two_zhe_price: 100,
            two_hui_zhe_price: 100,
            two_lve: "50%",
            there_zhe_price: 100,
            there_hui_zhe_price: 100,
            there_lve: "50%",
            count_zhe: 200,
            count_hui: 200,
            fengxian: 200,
            avat: "50%"
          }
        ],
        listQuery: {
          key_word: "",
          searchTime: [],
        },
        // tableKey: 1,
        currentPage: 1,
        page_count: 0,
        page_limit: 10,
        pickerOptions: {
          shortcuts: [{
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
      };
    },
    components: {
      Column,
      Pie
    },
    created() {

    },

    mounted() {},
    methods: {
      remoteMethod() {

      },

      //搜索事件
      searchList() {
        this.getList(1, this.page_limit, this.listQuery);
      },
      //每页几条数据
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page_limit = val;
        this.getList(1, val, this.listQuery);
      },
      //跳转到
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.getList(val, this.page_limit, this.listQuery);
      },
      //新增数据提交
      submit_add() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.submitLoading = true;
            notice_add(
                this.ruleForm.title,
                this.ruleForm.content,
                this.ruleForm.is_top,
                this.ruleForm.sort
              )
              .then((res) => {
                if (res.code == 200) {
                  this.$message({
                    message: res.msg,
                    type: "success",
                  });
                  this.getList(this.currentPage, this.page_limit, this.listQuery);
                  this.popup_add_show = false;
                  this.submitLoading = false;
                  this.ruleForm.title = "";
                  this.ruleForm.content = "";
                  this.ruleForm.sort = 0;
                  this.ruleForm.is_top = false;
                }
              })
              .catch(() => {
                this.submitLoading = false;
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      list_del(val) {
        let that = this;
        notice_del(val.row.id).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.getList(this.currentPage, this.page_limit, this.listQuery);
          }
        });
      },
      list_detail(val) {
        let that = this;
        notice_detail(val.row.id).then((res) => {
          console.log(res);
          if (res.code == 200) {
            that.dialogVisible = true;
            that.diary_details = res.data;
          }
        });
      },
      // 修改是否置顶 istop 1,0
      changeIsTop(val, isTop) {
        notice_top(val.row.id, isTop).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.getList(this.currentPage, this.page_limit, this.listQuery);
          }
        });
      },
      add(val) {
        this.ruleForm.is_top = false;
        this.popup_add_show = true;
      },
      edit(val) {
        this.diary_details = val;
        this.ruleForm.is_top = val.is_top ? true : false;
        this.popup_edit_show = true;
      },
      submit_edit() {
        let that = this;
        this.$refs.diary_details.validate((valid) => {
          if (valid) {
            console.log(that.diary_details, "fff");
            that.diary_details.is_top = that.diary_details.is_top ? 1 : 0;
            that.submitLoading = true;
            notice_edit(
              that.diary_details.id,
              that.ruleForm.is_top,
              that.diary_details.title,
              that.diary_details.content,
              that.diary_details.sort
            ).then((res) => {
              if (res.code == 200) {
                that.popup_edit_show = false;
                that.submitLoading = false;
                that.getList(this.currentPage, this.page_limit, this.listQuery);
              }
            });
          } else {
            console.log("输入框错误");
          }
        });
      },
    },
  };
</script>
<style type="text/css">
  .sortable-ghost {
    opacity: 0.8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .fenye {
    padding: 20px 0px;
  }

  .el-range-editor.el-input__inner {
    width: 205px !important;
    padding: 3px 3px !important;
  }

  .el-input__icon {
    display: none !important;
  }

  .header_title {
    display: flex;
    width: 620px;
    justify-content: flex-start;
  }
</style>
